<template>
  <div class="guide-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">就医指南</h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>就医指南</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 就医指南内容区域 -->
      <el-tabs v-model="activeTab" class="guide-tabs">
        <el-tab-pane label="就医流程" name="process">
          <div class="process-guide">
            <h2 class="section-title">门诊就医流程</h2>
            <div class="process-steps">
              <div class="step-item" v-for="(step, index) in processSteps" :key="index">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <h3 class="step-title">{{ step.title }}</h3>
                  <div class="step-desc" v-html="step.description"></div>
                  <div class="step-tips" v-if="step.tips">
                    <p><strong>小贴士：</strong>{{ step.tips }}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="process-diagram">
              <img src="https://via.placeholder.com/1000x200?text=就医流程图" alt="就医流程图" class="flow-chart">
              <p class="diagram-desc">门诊就医流程图（点击放大查看）</p>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="系统使用指南" name="system">
          <div class="system-guide">
            <h2 class="section-title">医疗系统使用指南</h2>
            
            <div class="guide-sections">
              <div class="guide-section">
                <h3>账号管理</h3>
                <ol>
                  <li>新用户注册：点击首页"注册"按钮，填写个人信息完成注册</li>
                  <li>登录系统：使用手机号/身份证号和密码登录</li>
                  <li>找回密码：点击登录页"忘记密码"，通过手机验证重置密码</li>
                  <li>个人信息修改：登录后在"个人中心"修改个人资料</li>
                </ol>
              </div>
              
              <div class="guide-section">
                <h3>预约挂号</h3>
                <ol>
                  <li>在首页或导航栏选择"预约挂号"功能</li>
                  <li>选择就诊科室、医生和就诊时间</li>
                  <li>填写就诊人信息（可添加多个就诊人）</li>
                  <li>确认预约信息并提交</li>
                  <li>在"我的预约"中查看和管理预约记录</li>
                </ol>
              </div>
              
              <div class="guide-section">
                <h3>在线问诊</h3>
                <ol>
                  <li>在首页或导航栏选择"在线问诊"功能</li>
                  <li>选择问诊方式：图文咨询或视频问诊</li>
                  <li>选择科室和医生</li>
                  <li>填写病情描述并上传相关图片（如有）</li>
                  <li>支付问诊费用，等待医生回复</li>
                </ol>
              </div>
              
              <div class="guide-section">
                <h3>检查报告查询</h3>
                <ol>
                  <li>在首页或导航栏选择"检查报告"功能</li>
                  <li>选择报告类型：检验报告、影像报告等</li>
                  <li>选择时间范围</li>
                  <li>查看报告详情，支持下载和打印</li>
                </ol>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="就诊须知" name="notice">
          <div class="notice-guide">
            <h2 class="section-title">就诊须知</h2>
            
            <el-collapse v-model="activeNotices">
              <el-collapse-item v-for="(notice, index) in noticeInfo" :key="index" :title="notice.title" :name="index">
                <div class="notice-content" v-html="notice.content"></div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('process')
const activeNotices = ref([0]) // 默认展开第一个须知

// 就医流程步骤
const processSteps = [
  {
    title: '预约挂号',
    description: `<p>您可以通过以下方式预约挂号：</p>
    <ul>
      <li>网上预约：通过本系统"预约挂号"功能</li>
      <li>电话预约：拨打预约热线 0123-45678910</li>
      <li>现场挂号：到医院一楼大厅自助挂号机或挂号窗口</li>
    </ul>`,
    tips: '网上预约可提前7天预约，电话预约可提前5天预约，建议您尽早预约以获取理想的就诊时间。'
  },
  {
    title: '缴费',
    description: `<p>挂号成功后，您可以通过以下方式缴纳挂号费和诊疗费用：</p>
    <ul>
      <li>自助缴费机：使用医保卡、银行卡或扫码支付</li>
      <li>收费窗口：现金或刷卡支付</li>
      <li>手机APP：关注医院公众号或下载APP进行支付</li>
    </ul>`,
    tips: '建议使用自助缴费机或手机支付，可大大缩短排队等待时间。'
  },
  {
    title: '候诊',
    description: `<p>完成缴费后，请按照挂号单上的诊室号码前往相应科室候诊区等待叫号。</p>
    <p>候诊区电子显示屏会显示当前就诊号码，请您留意自己的号码。</p>`,
    tips: '可通过医疗系统APP实时查看排队情况，合理安排候诊时间。'
  },
  {
    title: '就诊',
    description: `<p>听到叫号后，请携带挂号单和相关证件（身份证、医保卡等）进入诊室就诊。</p>
    <p>向医生详细描述病情，配合医生进行检查。</p>`,
    tips: '建议提前整理好病情描述和既往病史，准备好之前的检查报告和用药记录，以便医生更好地了解您的情况。'
  },
  {
    title: '检查/化验',
    description: `<p>如医生开具了检查或化验单，请按照单据上的指引前往相应科室进行检查。</p>
    <ul>
      <li>检验科：一楼东侧</li>
      <li>放射科：二楼西侧</li>
      <li>超声科：二楼东侧</li>
      <li>心电图室：三楼中部</li>
    </ul>`,
    tips: '大型检查可能需要预约，请提前咨询相关科室。检查前请注意相关注意事项，如空腹、憋尿等要求。'
  },
  {
    title: '取药/复诊',
    description: `<p>检查完成后，携带检查结果返回原诊室复诊。医生会根据检查结果为您制定治疗方案或开具处方。</p>
    <p>凭处方到药房取药：</p>
    <ul>
      <li>西药房：一楼南侧</li>
      <li>中药房：一楼北侧</li>
    </ul>`,
    tips: '取药时请核对药品名称、数量和用法用量，如有疑问请当场咨询药师。'
  }
]

// 就诊须知数据
const noticeInfo = [
  {
    title: '门诊就诊须知',
    content: `<div class="notice-section">
      <h3>就诊前准备</h3>
      <ol>
        <li>请携带有效证件：身份证、医保卡等</li>
        <li>如有既往病历、检查报告、用药记录，请一并携带</li>
        <li>建议提前通过系统预约，以减少等待时间</li>
        <li>请留意系统公告的门诊时间安排，合理规划就诊时间</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>就诊中注意事项</h3>
      <ol>
        <li>请遵守医院各项规章制度，保持安静、整洁的就医环境</li>
        <li>就诊时请关闭手机或调至静音模式</li>
        <li>与医生沟通时请详细描述病情，如实回答医生提问</li>
        <li>如需进行特殊检查（如CT、核磁共振等），请遵守相关注意事项</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>医保政策</h3>
      <ol>
        <li>系统支持多地医保查询和结算</li>
        <li>持医保卡就诊需先完成签约手续</li>
        <li>特需门诊、国际部等特殊服务项目可能不在医保报销范围内</li>
        <li>详细医保政策请咨询医保办或在系统中查询</li>
      </ol>
    </div>`
  },
  {
    title: '住院须知',
    content: `<div class="notice-section">
      <h3>入院手续</h3>
      <ol>
        <li>凭医生开具的住院证，到住院处办理入院手续</li>
        <li>需携带身份证、医保卡等有效证件</li>
        <li>根据提示缴纳住院押金</li>
        <li>签署相关知情同意书</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>住院须知</h3>
      <ol>
        <li>请遵守病房管理规定，保持病房整洁</li>
        <li>探视时间：工作日 17:00-20:00，周末及节假日 10:00-20:00</li>
        <li>请勿携带贵重物品，注意保管个人财物</li>
        <li>如有特殊饮食要求，请提前告知医护人员</li>
        <li>严禁在医院内吸烟，违者将被罚款</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>出院手续</h3>
      <ol>
        <li>医生确定可以出院后，护士会通知您办理出院手续</li>
        <li>结清住院费用，办理费用结算</li>
        <li>领取出院小结、药品等</li>
        <li>如需复诊，请遵医嘱按时就诊</li>
      </ol>
    </div>`
  },
  {
    title: '检查化验须知',
    content: `<div class="notice-section">
      <h3>检验注意事项</h3>
      <ol>
        <li>血液检查：部分项目需空腹，请遵医嘱</li>
        <li>尿液检查：建议留取中段尿，女性经期请避开</li>
        <li>粪便检查：收集新鲜粪便，采集后尽快送检</li>
        <li>检验结果查询：可通过系统APP、自助机或窗口查询</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>影像学检查注意事项</h3>
      <ol>
        <li>X线检查：请脱去金属饰品、佩戴物</li>
        <li>CT检查：部分检查需空腹，头颅CT检查请卸除假牙等</li>
        <li>核磁共振：体内有金属植入物、心脏起搏器者请提前告知</li>
        <li>超声检查：腹部超声需空腹，膀胱超声需憋尿</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>特殊检查注意事项</h3>
      <ol>
        <li>胃肠镜检查：需提前做肠道准备，具体方法请咨询医生</li>
        <li>心电图：检查前保持安静，避免剧烈运动</li>
        <li>造影检查：如有碘过敏史请提前告知</li>
        <li>肺功能检查：检查前请勿吸烟、剧烈运动</li>
      </ol>
    </div>`
  },
  {
    title: '系统使用帮助',
    content: `<div class="notice-section">
      <h3>账号问题</h3>
      <ol>
        <li>账号注册：请使用真实信息注册，手机号将作为登录账号</li>
        <li>密码找回：可通过手机验证码或绑定的邮箱找回密码</li>
        <li>信息修改：个人中心可修改基本信息，部分认证信息需提供证明材料</li>
        <li>账号安全：定期修改密码，不要在公共设备上保存登录状态</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>功能使用问题</h3>
      <ol>
        <li>预约挂号：每人每天最多可预约3个号源，未按时就诊累计3次将限制预约功能</li>
        <li>在线支付：支持多种支付方式，请在30分钟内完成支付，否则订单将自动取消</li>
        <li>检查报告：影像报告一般24小时内上传，检验报告4-6小时内上传</li>
        <li>在线咨询：医生会在24小时内回复，紧急问题请直接就医</li>
      </ol>
    </div>
    <div class="notice-section">
      <h3>投诉与建议</h3>
      <ol>
        <li>功能问题：系统设置-帮助中心-问题反馈</li>
        <li>服务投诉：个人中心-我的服务-投诉建议</li>
        <li>改进建议：可通过系统内"意见反馈"功能提交</li>
        <li>客服电话：0123-45678910（工作日 8:30-17:30）</li>
      </ol>
    </div>`
  }
]
</script>

<style scoped>
.guide-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  background-color: white;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 22px;
  margin: 0 0 25px;
  color: #333;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #1989fa;
  border-radius: 3px;
}

/* 就医流程样式 */
.process-steps {
  margin-bottom: 40px;
}

.step-item {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 60px;
  bottom: -30px;
  width: 2px;
  background-color: #e0e0e0;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1989fa;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  flex-shrink: 0;
  z-index: 1;
}

.step-content {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-title {
  font-size: 18px;
  margin: 0 0 15px;
  color: #1989fa;
}

.step-desc {
  color: #606266;
  line-height: 1.6;
}

.step-desc ul {
  padding-left: 20px;
  margin: 10px 0;
}

.step-desc li {
  margin-bottom: 8px;
}

.step-tips {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #ecf8ff;
  border-left: 3px solid #50bfff;
  color: #606266;
  line-height: 1.6;
}

.process-diagram {
  margin-top: 30px;
  text-align: center;
}

.flow-chart {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.diagram-desc {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}

/* 系统使用指南样式 */
.system-guide {
  padding: 10px 0;
}

.guide-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 20px;
}

.guide-section {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.guide-section h3 {
  font-size: 18px;
  margin: 0 0 15px;
  color: #1989fa;
}

.guide-section ol {
  padding-left: 20px;
  margin: 10px 0;
}

.guide-section li {
  margin-bottom: 10px;
  color: #606266;
}

/* 就诊须知样式 */
.notice-guide {
  padding: 10px 0;
}

.notice-content {
  color: #606266;
  line-height: 1.6;
}

.notice-section {
  margin-bottom: 20px;
}

.notice-section h3 {
  font-size: 16px;
  margin: 0 0 15px;
  color: #333;
}

.notice-section ol {
  padding-left: 20px;
  margin: 10px 0;
}

.notice-section li {
  margin-bottom: 10px;
  color: #606266;
}

@media (max-width: 992px) {
  .guide-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .step-item {
    flex-direction: column;
  }
  
  .step-number {
    margin-bottom: 15px;
  }
  
  .step-item:not(:last-child)::after {
    display: none;
  }
}
</style> 